<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=0,maximum-scale=1.0" />
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/reset.css"/>
    <link rel="stylesheet" type="text/css" href="__PUBLIC__/css/style.css"/>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="__PUBLIC__/js/public.js" type="text/javascript" charset="utf-8"></script>
    <title>扫码点餐-{$store_info.store_name}</title>
</head>
<body>
<!--主要内容部分--开始-->
<div id="menu">
    <!--店铺基本信息--开始-->
    <!--<div class="conTitle">海底捞</div>-->
    <div class="menu_header">
        <img class="headerBg" src="__PUBLIC__{$store_info.bg_image}"/>
        <div class="menuLogo">
            <img class="logo" src="__PUBLIC__{$store_info.logo}"/>
            <span class="logoName">{$store_info.store_name}</span>
        </div>
    </div>
    <!--店铺基本信息--结束-->

    <!--满减和公告信息--开始-->
    <div class="sale">
        <div class="saleList">
            <img class="saleIcon" src="__PUBLIC__/images/icon_manjian@1x.png"/>
            <p>{$manjian}</p>
        </div>
        <div class="brief">
            <img class="saleIcon" src="__PUBLIC__/images/icon_gonggao@1x.png"/>
            {$notice}
        </div>
    </div>
    <!--满减和公告信息--结束-->

    <!--主导航--开始-->
    <div class="menuBar">
        <a href="javascript:void(0);" class="list">
            <img class="listIcon" src="__PUBLIC__/images/icon_canju2@1x.png"/>
            <span class="listName">预定点餐</span>
        </a>
        <a href="{:U('Home/Coupon/index')}" class="list">
            <img class="listIcon" src="__PUBLIC__/images/icon_youhuiquan@1x.png"/>
            <span class="listName">领优惠券</span>
        </a>
        <a href="javascript:void(0);" class="list">
            <img class="listIcon" src="__PUBLIC__/images/icon_fuwuyuan@1x.png"/>
            <span class="listName">叫服务员</span>
        </a>
        <a href="javascript:void(0);" class="list">
            <img class="listIcon" src="__PUBLIC__/images/icon_fapiao@1x.png"/>
            <span class="listName">我要买单</span>
        </a>
    </div>
    <!--主导航--结束-->

    <!--分类左侧导航栏--开始-->
    <div class="menuLeft">
        <ul class="listCon">
            <foreach name="cate_list" item="v" key="k">
                <li class="on">
                    {$v['cate']}
                </li>
            </foreach>
        </ul>
        <span class="listConPull"><img src="__PUBLIC__/images/icon_quanbu@1x.png"/></span>
    </div>
    <!--分类左侧导航栏--结束-->carList

    <!--菜品分类列表部分--开始-->
    <foreach name="cate_list" item="v1" key="k1">
        <div class="menuCon">
            <div class="menuConList">
                <div class="listTitle">
                    {$v1['cate']}
                </div>
                <ul class="listCon">
                    <foreach name="v1['list']" item="v2" key="k2">
                        <li>
                            <a href="{:U('Home/Dishes/details',array('dishes_id'=>$v2['id']))}" class="listImg">
                                <img src="__PUBLIC__{$v2['image']}"/>
                                <div class="listContent">
                                    <span class="listName">{$v2['name']}</span>
                                    <span class="listPrice">￥<i class="price">{$v2['price']}</i></span>
                                    <img class="listAdd" src="__PUBLIC__/images/btn_add@1x.png"/>
                                </div>
                                <if condition="$v2['cart_dishes_num'] neq ''">
                                    <span class="listNum">{$v2['cart_dishes_num']}</span>
                                </if>
                            </a>
                        </li>
                    </foreach>
                </ul>
            </div>
        </div>
    </foreach>
    <!--菜品分类列表部分--结束-->
</div>
<!--主要内容部分--结束-->

<!--页脚部分--开始-->
<div id="footer">
    <a href="javascript:void(0);" class="carList">
        <img class="listIcon" src="__PUBLIC__/images/icon_gouwuche@1x.png" />
        <span class="carNum">0</span>
    </a>
    <div class="ftrList">
        <a href="{:U('Home/Index/index')}" class="homeList">
            <img class="listIcon" src="__PUBLIC__/images/icon_zhuye_hover@1x.png" />
            <span class="listName">首页</span>
        </a>
        <a href="{:U('Home/My/index')}" class="myList">
            <img class="listIcon" src="__PUBLIC__/images/icon_wode@1x.png" />
            <span class="listName">我的</span>
        </a>
    </div>

</div>
<!--页脚部分--结束-->

<script type="text/javascript">
    $(function(){
        carnum()
    })
    $(document).ready(function() {
        //获取三个div
        var $divs = $(".menuCon .menuConList");
        $divs.each(function() {
            var listCon = $(this).find('.listCon li')
            listCon.each(function() {
                if($(this).find('.listNum').html() <= 0) {
                    $(this).find('.listNum').hide()
                } else {
                    $(this).find('.listNum').show()
                }
            })
        });
        //获取所有选项卡
        var $dLis = $(".listCon li");

        //浏览器窗口可视区宽高
        var $wWidth, $wHeight;

        function changeWH() {
            //获取浏览器可视区宽高
            $wWidth = $(window).width();
            $wHeight = $(window).height();
            //      $divs.each(function() {
            //          $(this).width($wWidth);
            //          $(this).height($wHeight);
            //      });
        }

        //页面加载完成后调用一次
        changeWH();
        //当浏览器窗口大小发生变化时，触发的事件
        $(window).resize(changeWH);

        //初始化
        funScroll();

        //浏览器滚动条滚动触发的事件
        $(window).scroll(funScroll);

        //条滚动事件方法
        function funScroll() {
            //获取当前滚动条的高度
            var top = $(document).scrollTop();

            //遍历所有的div
            $divs.each(function(index) {
                var $divObj = $(this);
                var thisTop = $divObj.offset().top;
                if(top >= thisTop) {
                    //获取当前高亮的选项
                    var $activeObj = $dLis.find(".on");
                    if($dLis[index] && $($dLis[index]) != $activeObj) {
                        $($dLis[index]).addClass("on").siblings().removeClass("on");
                    }
                }
            });
        }

        //选项卡点击事件
        $dLis.click(function() {
            //更改选中项和其他兄弟节点的样式
            $dLis.find('li').removeClass("on");
            $(this).addClass("on").siblings().removeClass("on");
            var index = $dLis.index(this);
            //平滑到对应的div位置
            $("html,body").animate({
                scrollTop: $($divs[index]).offset().top
            }, 500);

        })
    })

    //计算所有数量
    //购物车数量显示
    function carnum() {
        var conut = $('.carNum').text();
        if (parseInt(conut)<= 0) {
            $('.carNum').hide()
        } else{
            $('.carNum').show()
        }
        var carnum=0;
        $(".listNum").each(function (){
            if ($(this).text()!== '' && parseInt($(this).text())>0) {
                var num = $(this).closest('.listCon li').find(".listNum").text();
                carnum+=parseInt(num)
                $('.carNum').text(carnum)
                if($('.carNum').text()=="" || parseInt($('carNum').text())==0 ){
                    $('.carNum').hide()
                }else {
                    $('.carNum').show()
                }
            }
        })
    }

    //点击按钮弹出菜单
    $('.listConPull').on('click',function(){
        $('.listCon').animate({
            'left':'0'
        },200);
        $(this).hide()
    })
    //点击页面其他地方关闭菜单
    document.addEventListener('click',function (e) {
        var parent=$(e.target).parents('.listCon,.menuLeft');

        if(parent.length===0){
            console.log('不在弹层与按钮区')
            //操作此区域

            $('.listCon').animate({
                'left':'-2.48rem'
            },200);
            $('.listConPull').show(100)

        }else{
            console.log('按钮与弹层区')
        }
    })
</script>
</body>
</html>